<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业Excel协作平台</title>
    
    <!-- Luckysheet CSS -->
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
    
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 10px 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        #luckysheet {
            position: absolute;
            width: 100%;
            height: calc(100% - 60px);
            top: 60px;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        🏢 企业Excel协作平台 - 轻量版
    </div>
    
    <div id="luckysheet"></div>

    <!-- Luckysheet JS -->
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
    
    <script>
        $(function () {
            var options = {
                container: 'luckysheet',
                title: '企业协作表格',
                lang: 'zh', // 中文界面
                
                // 基本配置
                allowCopy: true,
                allowEdit: true,
                allowUpdate: true,
                
                // 工具栏配置
                showtoolbar: true,
                showinfobar: true,
                showsheetbar: true,
                showstatisticBar: true,
                
                // 协作配置（本地存储模拟）
                updateMode: 'fast',
                
                // 本地存储配置
                loadUrl: '', // 不使用远程加载
                updateUrl: '', // 不使用远程更新
                
                // 初始数据
                data: [{
                    "name": "工作表1",
                    "color": "",
                    "index": "0",
                    "status": "1",
                    "order": "0",
                    "data": [
                        ["部门", "姓名", "职位", "工资", "入职日期"],
                        ["技术部", "张三", "前端工程师", "15000", "2023-01-15"],
                        ["技术部", "李四", "后端工程师", "16000", "2023-02-01"],
                        ["市场部", "王五", "市场专员", "12000", "2023-03-10"],
                        ["财务部", "赵六", "财务助理", "10000", "2023-04-05"]
                    ]
                }],
                
                // 钩子函数 - 自动保存到本地
                cellEditBefore: function(range, value, sheetOrder) {
                    // 编辑前保存状态
                    saveToLocal();
                },
                
                cellEditAfter: function(range, value, sheetOrder) {
                    // 编辑后保存状态
                    saveToLocal();
                }
            };
            
            // 初始化Luckysheet
            luckysheet.create(options);
            
            // 尝试从本地存储加载数据
            loadFromLocal();
        });
        
        // 保存到本地存储
        function saveToLocal() {
            try {
                var data = luckysheet.getAllSheets();
                localStorage.setItem('enterprise_excel_data', JSON.stringify(data));
                console.log('数据已保存到本地');
            } catch (e) {
                console.log('保存失败:', e);
            }
        }
        
        // 从本地存储加载
        function loadFromLocal() {
            try {
                var savedData = localStorage.getItem('enterprise_excel_data');
                if (savedData) {
                    var data = JSON.parse(savedData);
                    luckysheet.setAllSheets(data);
                    console.log('从本地加载数据成功');
                }
            } catch (e) {
                console.log('加载失败:', e);
            }
        }
        
        // 导出功能
        function exportData() {
            var data = luckysheet.getAllSheets();
            var dataStr = JSON.stringify(data, null, 2);
            var dataBlob = new Blob([dataStr], {type: 'application/json'});
            
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(dataBlob);
            link.download = 'enterprise_excel_' + new Date().getTime() + '.json';
            link.click();
        }
        
        // 添加快捷键保存
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                saveToLocal();
                alert('数据已保存到本地！');
            }
        });
    </script>
</body>
</html> 